<template>
  <header class="col-md-2">
    <div class="logo">
      <!--超小屏幕下隐藏logo-->
      <img class="logo_icon" src="../assets/img/huasen.png" alt="">
      <!--控制网站处于xm下显示该元素-->
      <span class="logo_text">花森酱</span>
    </div>
    <div class="nav">
      <ul>
        <li><router-link to="/culture" tag="a"><i class="iconfont icon-mtbdm nav_icon"></i><span>文化</span></router-link></li>
        <li><router-link to="/military" tag="a"><i class="iconfont icon-fangzhijixie nav_icon"></i><span>军事</span></router-link></li>
        <li><router-link to="/recreation" tag="a"><i class="iconfont icon-chuanmeiyule nav_icon"></i><span>娱乐</span></router-link></li>
        <li><router-link to="/sports" tag="a"><i class="iconfont icon-fangzhixingye nav_icon"></i><span>运动</span></router-link></li>
        <li><router-link to="/technology" tag="a"><i class="iconfont icon-gyjdt nav_icon"></i><span>科技</span></router-link></li>
      </ul>
    </div>
  </header>
</template>

<script>
    export default {
        name: "Header"
    }
</script>

<style scoped>
  @import "../assets/css/iconfont.css";
  /*header*/
  header {
    /*使用！important提升为最高权重取消默认自带的padding值*/
    padding: 0!important;
  }
  .logo {
    margin-top: 8px;
    background-color: gold;
  }
  .logo img {
    /*防止屏幕变小图片显示不完全（设置图片的缩放）*/
    /*width: 100%;*/
    /*阻止图片的缩放（xs超小屏幕的图片缩放）*/
    max-width: 100% ;
    display: block;
    margin: 0 auto;
  }
  /*超小屏幕下处理logo下的img隐藏掉*/
  .logo span {
    display: block;
    height: 100px;
    line-height: 100px;
    color: white;
    text-align: center;
    font-size: 32px;
    text-shadow: 3px 2px 5px black;
  }
  .nav ul {
    width: 100%;
    background-color: #cccccc;
  }
  .nav_icon {
    color: black;
    margin-right: 10px;
  }
  .nav a {
    width: 100%;
    /*转换成块级元素才可以设置宽度*/
    display: block;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    padding-left: 10px;
  }
  .nav a:hover {
    background-color: white;
    color: #333333;
  }
  .nav a:before {
    vertical-align: middle;
    padding-right: 5px;
  }
</style>
